<template>
	<view class="page">
		<view class="box">
			<view class="wrapper">
				<div class="logo">
					<image src="https://snpl.scgjcx.com/static/logo.png"></image>
				</div>
				<view class="title">遂宁市智慧喷淋平台</view>
				<view class="form">
					<view class="form-item">
						<uni-icons type="person-filled" size="30" color="rgb(119, 119, 119)"></uni-icons>
						<view class="input">
							<input placeholder="请输入用户名" @input="event => onInputChange(event, 'mobile')" />
						</view>
					</view>
					<view class="form-item">
						<uni-icons type="locked-filled" size="30" color="rgb(119, 119, 119)"></uni-icons>
						<view class="input">
							<input password="true" placeholder="请输入密码" @input="event => onInputChange(event, 'passwd')" />
						</view>
					</view>
					<button :loading="loading" @click="onClickLogin()">登录</button>
				</view>
			</view>
		</view>
		<view class="tip">请联系管理员获取账户</view>
	</view>
</template>

<script>
	import { request } from '@/util/request.js';
	export default {
		data() {
			return {
				mobile: '',
				passwd: '',
				loading: false
			}
		},
		methods: {
			onInputChange(event, prop) {
				const value = event.target.value;
				if (prop === 'mobile') this.mobile = value;
				if (prop === 'passwd') this.passwd = value;
			},
			onClickLogin() {
				if (!this.mobile) {
					uni.showToast({
						icon: "error",
						title: '请输入用户名'
					});
					return;
				}
				if (!this.passwd) {
					uni.showToast({
						icon: "error",
						title: '请输入密码'
					});
					return;
				}
				console.log('登录账号', this.mobile, '登录密码', this.passwd);
				this.loading = true;
				request({
					path: '/auth/login',
					method: 'post',
					data: { mobile: this.mobile, password: this.passwd },
					success: ({ data }) => {
						if (data.code === 0) {
							this.onLoginSuccess(data.data);
						} else {
							uni.showToast({
								icon: 'none',
								title: data.msg,
								duration: 2000
							});
						}
					},
					fail: err => {
						this.showToast({
							icon: 'none',
							title: err
						});
					},
					complete: () => {
						setTimeout(() => {
							this.loading = false;
						}, 2000);
					}
				});
				console.log(this.mobile, this.passwd, '123');
			},
			async onLoginSuccess(data) {
				await uni.showToast({
					title: '登录成功',
					duration:2000,
					icon:"success"
				});
				uni.setStorageSync('token', data.token);
				uni.setStorageSync('userData', data.userData);
				uni.setStorageSync('permissions', []);
				uni.redirectTo({
					url: '/pages/index/index'
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.page {
		position: relative;
		background-image: url('https://snpl.scgjcx.com/static/bg0.png');
		background-size: 100% 100%;
		
		@wBox: 76%;
		.box {
			position: absolute;
			width: @wBox;
			height: 370px;
			top: 50%;
			left: (100% - @wBox) / 2;
			margin-top: -220px;
			background-color: #fff;
			border-radius: 10px;
			box-shadow: 0 0 10px 5px rgba(153,153, 153, 0.8);
			
			.wrapper {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				
				@wLogo: 80px;
				.logo {
					margin-top: -40px;
					image {
						width: @wLogo;
						height: @wLogo;
						border-radius: 50%;
						box-shadow: 0 0 5px 5px rgba(153,153, 153, 0.8);
					}
				}
				
				.title {
					color: rgb(52, 65, 88);
					font-size: 18px;
					margin-top: 20px;
				}
				
				.form {
					width: 80%;
					margin-top: 45px;
					box-sizing: border-box;
					.form-item {
						height: 40px;
						display: flex;
						align-items: center;
						margin-bottom: 20px;
						.input {
							height: 100%;
							margin-left: 8px;
							flex: 1;
							border-bottom: solid 1px rgb(209, 209, 209);
							input {
								width: 100%;
								height: 100%;
								padding-left: 15px;
								color: rgb(209, 209, 209);
							}
						}
					}
					button {
						width: calc(100% - 1px);
						margin-top: 40px;
						border-radius: 40px;
						background-color: rgb(11, 72, 159);
						color: #fff;
					}
				}
			}
		}
		
		.tip {
			width: 100%;
			position: absolute;
			bottom: 70px;
			text-align: center;
			color: rgb(125, 125, 125);
		}
	
	}
</style>
